﻿@page "/datetimepickers"

<h3>DatePicker 日期选择器</h3>

<h4>用于选择或输入日期</h4>

<Block Title="选择日" Introduction="以「日」为基本单位，基础的日期选择控件" CodeFile="datepicker.1.txt">
    <DatePickerBody IsShown="true" OnValueChanged="@DateValueChanged" />

    <Logger @ref="DateLogger" class="mt-3" />
</Block>

<Block Title="选择任意时间点" Introduction="可以选择任意时间" CodeFile="timepicker.1.txt">
    <TimePickerBody ValueChanged="@TimeValueChanged" />

    <Logger @ref="TimeLogger" class="mt-3" />
</Block>

<Block Title="数据双向绑定" Introduction="点击确认按钮时间选择框值与文本框值一致" CodeFile="timepicker.2.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <div class="d-flex flex-column">
                    <TimePickerBody @bind-Value="@SpanValue" />
                    <BootstrapInput TItem="TimeSpan" @bind-Value="@SpanValue" style="width: 180px; margin-top: 0.5rem;" />
                </div>
            </div>
            <div class="form-group col-12 col-sm-6">
                <div class="d-flex flex-column">
                    <TimePickerBody OnValueChanged="@OnValueChange" />
                    <BootstrapInput TItem="string" @bind-Value="@SpanValue2" style="width: 180px; margin-top: 0.5rem;" />
                </div>
            </div>
        </div>
    </div>
</Block>

<Block Title="点击弹出日期框" Introduction="以「日」为基本单位，基础的日期选择控件" CodeFile="datepicker.3.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-sm-4">
                <DateTimePicker Value="@DateTime.Today" />
            </div>
        </div>
    </div>

    <Logger @ref="DateTimeLogger" class="mt-3" />
</Block>

<Block Title="数据双向绑定" Introduction="日期组件时间改变时文本框内的数值也跟着改变" CodeFile="datepicker.4.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-sm-6">
                <DateTimePicker @bind-Value="@BindValue" OnValueChanged="@DateTimeValueChanged" Placement="Placement.Right" />
            </div>
            <div class="form-group col-sm-6">
                <input class="form-control" @bind="@BindValueString" />
            </div>
            <div class="form-group col-sm-12">
                <Logger @ref="DateTimeLogger" class="mt-3" />
            </div>
        </div>
    </div>
</Block>

<Block Title="带时间的选择器" Introduction="在同一个选择器里选择日期和时间" CodeFile="datepicker.5.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-sm-4">
                <DateTimePicker ViewModel="DatePickerViewModel.DateTime" />
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
